<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>罗店中学-功勋走廊</title>
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/all.min.css">
</head>

<body class="meritorious_bg">
    <!-- 顶部区域 start-->
    <div class="topbar clearfix">
        <a href="index.html"   class="logo"      title="罗店中学"> </a>
        <div      class="nav darkblue" >
            <ul>
                <li ><a href="history.html"><span class="txt">校史概览</span></a></li>
                <li ><a href="alumni.html"><span class="txt">校友录</span></a></li>
                <li ><a href="leader.html"><span class="txt">历届领导</span></a></li>
                <li  class="current" ><a href="meritorious.html"><span class="txt">功勋走廊</span></a></li>
                <li ><a href="address_change.html"><span class="txt">校址变迁</span></a></li>
                <li ><a href="school_song.html"><span class="txt">罗中校歌</span></a></li>
            </ul>
        </div>
    </div>
    <!-- // 顶部区域  end-->
    <div class="wrap meritorious-box" id="wrap-box">
        <a href="meritorious-detail.html" class="detail-btn"> 功勛内頁 </a>
        <div class="meritorious-til animated fadeInLeftBig">
            <img src="images/meritorious-til.png" alt="">
        </div>
        <div class="hill"></div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function () {
            $('.meritorious-til img').load(function(){
                let img_h = $(this).height()
                //console.log(img_h)
                $('.detail-btn').height(img_h)
            })
            $('.detail-btn').mouseover(function(){
                $('.meritorious-til').addClass("hover")
            }).mouseleave(function(){
                $('.meritorious-til').removeClass("hover")
            })
        })
    </script>
</body>

</html>